<template>
  <div class="nav" :class="['navcontainer', { 'dark-nav': isDark }]">
    <!-- <div class="navigation">
      <img v-if="!isshowsid" class="all" src="../assets/image/asidebar/all.png" alt="" @click="showsid" />
      <img v-else class="all" src="../assets/image/asidebar/x.png" alt="" @click="showsid" />
    </div> -->
    <div class="flex-ct">
      <div class="flex-st">
        <img class="logo" src="../assets/image/home/logo.png" alt="" />
        <div class="title">AIME</div>
      </div>
      <div class="flex-en">
        <div @click.stop="LinkWallet" class="link">
          <div class="flex-cc" v-if="!account">
            <img class="SVG" src="../assets/image/home/SVG.png" alt="" />

            <span>{{ $t("home.Wallet") }} </span>
          </div>
          <div v-else>{{ _hideAddress(account) }}</div>
        </div>
        <div @click="showSidebar = true">三</div>
      </div>
    </div>
    <div class="dialogbox" v-if="flag == true">
      <div class="tanchaun">
        <i class="el-icon-close" @click="flag = false"></i>
        <div class="meatmaskimg" @click="ACCOUNT(1)">
          <img src="../assets/image/metmask.png" alt="" />
          <p class="meatmaskimg_t1">MetaMask</p>
          <p class="meatmaskimg_t2">Connect to your MetaMask Wallet</p>
        </div>
        <div class="walletconnectimg" @click="ACCOUNT(2)">
          <img src="../assets/image/wallconnet.png" alt="" />
          <p class="meatmaskimg_t1">WalletConnect</p>
          <p class="meatmaskimg_t2">
            Please click and scan QR code to connect mobile wallet
          </p>
        </div>
      </div>
    </div>

    <sidebar
      :showSidebar="showSidebar"
      @showSidebarcli="showSidebarcli"
    ></sidebar>
  </div>
</template>

<script>
import { _hideAddress } from "@/utils/public.js";
import sidebar from "./sidebar.vue";
import { AIMEMainContract } from "@/assets/js/web3.js";

import Web3 from "web3";
// import sidebar from "./sidebar.vue";
// import { abieth1, abieth1Adress } from "@/assets/js/ethabi1.js";
// import { abieth, abiethAdress } from "@/assets/js/ethabi.js"; //busd
// import { abi, fist_contracts, contractAdress } from "../assets/js/wb3.js";
// import { abi,fist_contracts2, contractAdress2 } from "../assets/js/wb32"; //控制
// import WalletConnectProvider from "@walletconnect/web3-provider";
// var provider = new WalletConnectProvider({
//   rpc: {
//     1: "https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161",
//   },
//   chainId: 1, //需要连接的区块链id
//   networkId: 1,
//   qrcode: true, //二维码是否开启
// });
export default {
  name: "Nav",
  components: {
    sidebar,
  },
  props: {
    isDark: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      account: "",
      account1: "",
      flag: false,
      moneySHE: "",
      time1: "",
      isshowsid: false,
      showSidebar: false,
    };
  },

  created() {
    this.account = sessionStorage.getItem("account") || "";
    // console.log(this.account);
    this.account1 =
      this.userAddress.substring(0, 5) +
      "..." +
      this.userAddress.substring(38, this.userAddress.length);
    // this.getbalance();
  },
  mounted() {
    this.account = sessionStorage.getItem("account") || "";
    this.initLeaderAddress();
  },
  computed: {
    userAddress() {
      return this.$store.state.userAddress;
    },
  },
  watch: {
    userAddress: function(news, lovd) {
      if (news) {
        clearInterval(this.time1);
        this.time1 = setInterval(() => {
          // this.getbalance();
        }, 3000);
      } else {
        clearInterval(this.time1);
      }
    },
  },
  methods: {
    async initLeaderAddress() {
      // 获取合约中的上级地址
      const leaderOnChain = await AIMEMainContract.methods
        .teams(this.account)
        .call();
      // console.log(leaderOnChain);
      const isEmpty =
        leaderOnChain.leader == "0x0000000000000000000000000000000000000000";

      if (isEmpty) {
        const url = window.location.href;
        const refIndex = url.indexOf("ref=");

        let leaderFromURL = "";

        if (refIndex !== -1) {
          const start = refIndex + 4;
          let end = url.indexOf("&", start);
          if (end === -1) end = url.length; // 没有其他参数就到结尾

          leaderFromURL = url.substring(start, end).split("%")[0]; // 去掉结尾的 %
        }

        console.log(leaderFromURL);
        if (leaderFromURL) {
          sessionStorage.setItem("leaderAddress", leaderFromURL);
        } else {
          console.warn("URL中没有合法的上级地址");
        }
      } else {
        // 有上级地址，存储到 sessionStorage
        sessionStorage.setItem("leaderAddress", leaderOnChain.leader);
      }
    },

    _hideAddress,
    goToNewPage() {
      this.$router.push({ path: "/new-page" }); // 跳转到路由 '/new-page'
    },
    showSidebarcli() {
      this.showSidebar = false;
    },

    showsid() {
      this.isshowsid = !this.isshowsid;
    },
    changeLanguage() {
      this.$i18n.locale == "zh"
        ? (this.$i18n.locale = "en")
        : (this.$i18n.locale = "zh"); //设置中英文模式
      sessionStorage.setItem("languageSet", this.$i18n.locale); //将用户设置存储到localStorage以便用户下次打开时使用此设置
    },
    LinkWallet() {
      let adress = sessionStorage.getItem("account");
      if (adress == null) {
        // this.ACCOUNT();
        // this.getbalance();
        // this.flag = true;
        // this.$router.push("/wallet");
        this.connectMetaMask();
      } else {
        adress = "";
        sessionStorage.clear();
        window.location.reload();
      }
    },
    open() {
      window.open("https://pancakeswap.finance/swap", "_blank");
    },
    // MetaMask 登录逻辑
    async connectMetaMask() {
      try {
        if (typeof window.ethereum !== "undefined") {
          const accounts = await window.ethereum.request({
            method: "eth_requestAccounts",
          });
          this.account = accounts[0];
          console.log("MetaMask 连接成功:", this.account);
          // 在这里处理登录逻辑
          sessionStorage.setItem("account", this.account);
          this.initLeaderAddress();
          window.location.reload();
          // this.$router.back();
        } else {
          alert("请安装钱包扩展");
        }
      } catch (error) {
        console.error("MetaMask 登录失败:", error);
      }
    },

    /* 查询余额 */
    // getbalance() {
    //   if (this.userAddress) {
    //     let thisweb3 = new Web3(
    //       Web3.givenProvider ||
    //         new Web3.providers.HttpProvider(
    //           "https://mainnet.infura.io/v3/a33fcf3b6b0546d28dffb41f2da7498a"
    //         )
    //     );
    //     // let eth_contract1 = new thisweb3.eth.Contract(abi, contractAdress);
    //     let fist_contractss = fist_contracts;
    //     fist_contractss.methods
    //       .getBalance(this.account)
    //       .call()
    //       .then((res) => {
    //         this.moneySHE = res / 100;
    //       });
    //   } else {
    //   }
    // },
    // ACCOUNT(index) {
    //   if (index == 1) {
    //     var _this = this;
    //     const desiredNetwork = "1"; // '1' 表示以太坊主网
    //     //检测当前浏览器是否以太坊兼容，并进行相应的处理
    //     if (typeof window.ethereum === "undefined") {
    //       alert("Looks like you need a Dapp browser to get started.");
    //       alert("Consider installing MetaMask!");
    //     } else {
    //       //如果用户安装了MetaMask，你可以要求他们授权应用登录并获取其账号
    //       ethereum
    //         .enable()
    //         //如果用户拒绝了登录请求
    //         .catch(function(reason) {
    //           if (reason === "User rejected provider access") {
    //             // 用户不想登录，你看该怎么办？
    //           } else {
    //             // 本不该执行到这里，但是真到这里了，说明发生了意外
    //             alert("There was an issue signing you in.");
    //           }
    //         })
    //         //如果用户同意了登录请求，你就可以拿到用户的账号
    //         .then(function(accounts) {
    //           // You also should verify the user is on the correct network:
    //           //你也可以验证用户接入了正确的网络
    //           if (ethereum.networkVersion !== desiredNetwork) {
    //             // alert(
    //             //   "This application requires the main network, please switch it in your MetaMask UI."
    //             // );
    //             //我们计划在最近补充一个有关网络切换的API，参考下面链接
    //             // https://github.com/MetaMask/metamask-extension/issues/3663
    //           }
    //           const add = ethereum.enable().then((res) => {});
    //           //一旦获取了用户账号，你就可以签名交易
    //           const account = accounts[0];
    //           let thisweb3 = new Web3(
    //             Web3.givenProvider ||
    //               new Web3.providers.HttpProvider(
    //                 "https://mainnet.infura.io/v3/a33fcf3b6b0546d28dffb41f2da7498a"
    //               )
    //           );
    //           // let eth_contract2 = new thisweb3.eth.Contract(
    //           //   abieth,
    //           //   abiethAdress
    //           // );
    //           let eth_contract = new thisweb3.eth.Contract(abi, contractAdress);
    //           let value = "100000000000000000000000000";
    //           // 判断是否授权(都是合约地址)
    //           // eth_contract.methods
    //           //   .allowance(account, contractAdress)
    //           //   .call()
    //           //   .then((result) => {
    //           //     if (result <= 10000) {
    //           //       eth_contract.methods
    //           //         .approve(contractAdress, value)
    //           //         .send({ from: account })
    //           //         .then((result) => {
    //           //           _this.$store.commit("setuserAddress", account);
    //           //           _this.account = account;
    //           //           _this.flag = false;
    //           //           //设置localStroage值
    //           //           sessionStorage.setItem("account", account);
    //           //           //获取localStroage值
    //           //           sessionStorage.getItem("account");
    //           //           _this.account1 =
    //           //             sessionStorage.getItem("account").substring(0, 5) +
    //           //             "...." +
    //           //             sessionStorage
    //           //               .getItem("account")
    //           //               .substring(
    //           //                 38,
    //           //                 sessionStorage.getItem("account").length
    //           //               );
    //           //           // _this.getbalance();
    //           //         });
    //           //     } else {
    //           //       _this.$store.commit("setuserAddress", account);
    //           //       _this.account = account;
    //           //       _this.flag = false;
    //           //       //设置localStroage值
    //           //       sessionStorage.setItem("account", account);
    //           //       //获取localStroage值
    //           //       sessionStorage.getItem("account");
    //           //       _this.account1 =
    //           //         sessionStorage.getItem("account").substring(0, 5) +
    //           //         "...." +
    //           //         sessionStorage
    //           //           .getItem("account")
    //           //           .substring(
    //           //             38,
    //           //             sessionStorage.getItem("account").length
    //           //           );
    //           //       _this.$message.success("Wallet link succeeded");
    //           //       // _this.getbalance();
    //           //     }
    //           //   });
    //           // eth_contract.methods
    //           //   .allowance(account, contractAdress2)
    //           //   .call()
    //           //   .then((result) => {
    //           //     if (result <= 10000) {
    //           //       eth_contract.methods
    //           //         .approve(contractAdress2, value)
    //           //         .send({ from: account })
    //           //         .then((result) => {
    //           //           _this.$store.commit("setuserAddress", account);
    //           //           _this.account = account;
    //           //           _this.flag = false;
    //           //           //设置localStroage值
    //           //           sessionStorage.setItem("account", account);
    //           //           //获取localStroage值
    //           //           sessionStorage.getItem("account");
    //           //           _this.account1 =
    //           //             sessionStorage.getItem("account").substring(0, 5) +
    //           //             "...." +
    //           //             sessionStorage
    //           //               .getItem("account")
    //           //               .substring(
    //           //                 38,
    //           //                 sessionStorage.getItem("account").length
    //           //               );
    //           //           // _this.getbalance();
    //           //         });
    //           //     } else {
    //           //       _this.$store.commit("setuserAddress", account);
    //           //       _this.account = account;
    //           //       _this.flag = false;
    //           //       //设置localStroage值
    //           //       sessionStorage.setItem("account", account);
    //           //       //获取localStroage值
    //           //       sessionStorage.getItem("account");
    //           //       _this.account1 =
    //           //         sessionStorage.getItem("account").substring(0, 5) +
    //           //         "...." +
    //           //         sessionStorage
    //           //           .getItem("account")
    //           //           .substring(
    //           //             38,
    //           //             sessionStorage.getItem("account").length
    //           //           );
    //           //       _this.$message.success("Wallet link succeeded");
    //           //       // _this.getbalance();
    //           //     }
    //           //   });

    //           // shouquan2;
    //           // eth_contract2.methods
    //           //   .allowance(account, contractAdress2)
    //           //   .call()
    //           //   .then((result) => {
    //           //     if (result <= 10000) {
    //           //       // console.log(contractAdress2);
    //           //       eth_contract2.methods
    //           //         .approve(contractAdress2, value)
    //           //         .send({ from: account })
    //           //         .then((result) => {
    //           //           console.log(result);
    //           _this.$store.commit("setuserAddress", account);
    //           _this.account = account;
    //           _this.flag = false;
    //           //设置localStroage值
    //           sessionStorage.setItem("account", account);
    //           //获取localStroage值
    //           sessionStorage.getItem("account");
    //           _this.account1 =
    //             sessionStorage.getItem("account").substring(0, 5) +
    //             "..." +
    //             sessionStorage
    //               .getItem("account")
    //               .substring(38, sessionStorage.getItem("account").length);
    //           location.reload();
    //           // _this.getbalance();
    //         });
    //       // } else {
    //       //   _this.$store.commit("setuserAddress", account);
    //       //   _this.account = account;
    //       //   _this.flag = false;
    //       //   //设置localStroage值
    //       //   sessionStorage.setItem("account", account);
    //       //   //获取localStroage值
    //       //   sessionStorage.getItem("account");
    //       //   _this.account1 =
    //       //     sessionStorage.getItem("account").substring(0, 5) +
    //       //     "...." +
    //       //     sessionStorage
    //       //       .getItem("account")
    //       //       .substring(
    //       //         38,
    //       //         sessionStorage.getItem("account").length
    //       //       );
    //       //   _this.$message.success("Wallet link succeeded");
    //       //   // _this.getbalance();
    //       // }
    //       // });
    //       // });
    //     }
    //   } else {
    //     this.WalletConnect();
    //   }
    // },
    // async WalletConnect() {
    //   var _this = this;
    //   provider
    //     .enable()
    //     .then((res) => {
    //       let web3 = new Web3(provider);
    //       _this.$store.commit("setuserAddress", res[0]);
    //       _this.account = res[0];
    //       _this.flag = false;
    //       //设置localStroage值
    //       sessionStorage.setItem("account", res[0]);
    //       //账户更改触发的方法
    //       provider.on("accountsChanged", (accounts) => {
    //         sessionStorage.setItem("account", res[0]);
    //       });
    //       //账户断开的方法
    //       provider.on("disconnect", (code, reason) => {
    //         web3 = null;
    //         window.sessionStorage.clear();
    //         location.reload();
    //       });
    //     })
    //     .catch((err) => {});
    // },
  },
};
</script>

<style lang="less" scoped>
.puop {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 9;
}

.all {
  position: fixed;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 50px;
  // height: 40px;
  margin: 25px 20px 0px 27px;
  z-index: 999;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 52px;
  height: 72px;
  margin-right: 8px;

  // position: absolute;
  // left: 120px;
  // top: 25px;
  // margin-right: 100px;
  // margin-top: 4px;
}
.SVG {
  width: 32px;
  height: 32px;
  margin-right: 16px;
}
.title {
  font-size: 48px;
  color: #000000;
}
.superloan {
  font-weight: bold;
  font-size: 32px;
  color: #000000;
  margin-left: 16px;
}

.wail {
  width: 46px;
  height: 46px;
  margin-right: 20px;

  img {
    width: 100%;
  }
}

.changeze {
  width: 36px;
  height: 36px;
  margin-right: -10px;
  margin-left: 15px;
}

.lang {
  height: 50px;
  width: 100px;
  border: none !important;
  color: #754119 !important;
  // background: url("../assets/image/home/english.png") no-repeat !important;
  background-size: 100% 100% !important;
  margin-right: 40px;
  font-size: 30px;
}

.nav {
  padding: 12px 30px;

  // border-bottom: 2px solid #363636;
  .flex-bt {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .link {
    cursor: pointer;
    font-weight: 500;
    font-size: 26px;
    background: #bdee63;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    border-radius: 12px 12px 12px 12px;
    padding: 16px 36px;
    color: #121113;
    margin-right: 32px;
  }
}

.dialogbox {
  // z-index: 99;
  // width: 100%;
  // height: 100vh;
  // position: relative;
  // background: #00000080;
  .tanchaun {
    z-index: 999;
    width: 600px;
    height: 600px;
    border-radius: 15px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 200px auto;
    background: #efefef;

    i {
      margin-left: 550px;
      margin-top: 20px;
      color: #999;
      font-size: 32px;
      cursor: pointer;
    }

    .meatmaskimg,
    .walletconnectimg {
      padding: 24px 16px;
      border-bottom: 1px solid rgba(195, 195, 195, 0.14);
      text-align: center;

      img {
        width: 100px;
        height: 100px;
      }

      .meatmaskimg_t1 {
        font-size: 24px;
        font-weight: 700;
        margin-top: 0.5em;
        color: rgb(12, 12, 13);
      }

      .meatmaskimg_t2 {
        font-size: 18px;
        margin: 0.333em 0px;
        color: rgb(169, 169, 188);
      }
    }

    .walletconnectimg {
      border-bottom: 0;
      margin-top: 20px;
    }
  }
}
</style>
